<template>
  <div>
    <!-- 两句诗 -->
    <div v-show="twoPoem" class="my-animation-slide-top">
      <twoPoem :isHitokoto="false"></twoPoem>
    </div>
    <div v-show="!twoPoem">
      <myHeader></myHeader>
    </div>
    <!-- Json格式化框 -->
    <div class="comment-wrap">
      <!-- 操作按钮 -->
      <div class="myBetween" style="padding: 20px;flex-wrap: wrap;">
        <!-- 左 -->
        <div class="myBetween-item">
          <el-date-picker :clearable="false" v-model="queryParam.value" :format="'yyyy-MM 第' + queryParam.week + '周'"
            @change="weekChange" value-format="yyyy-M-d" class="inp" size="medium" type="week" placeholder="请选择"
            :picker-options="{ 'firstDayOfWeek': 1 }" style="margin-top: 6px; margin-right: 6px;">
          </el-date-picker>
          <myTimer style="margin-top: 6px; margin-right: 6px;"></myTimer>
        </div>
        <!-- 右 -->
        <div style="display: flex; flex-wrap: wrap;">
          <proButton class="comment-btn" :info="'保存周报'" @click.native="saveReport()" :before="$constant.before_color_0"
            :after="$constant.after_color_0" style="margin-top: 6px; margin-right: 6px;">
          </proButton>
          <proButton class="comment-btn" :info="'导出周报'" @click.native="exportReport()" :before="$constant.before_color_0"
            :after="$constant.after_color_0" style="margin-top: 6px; margin-right: 6px;">
          </proButton>
          <proButton class="comment-btn" :info="'全屏/关闭'" @click.native="fullScreen()" :before="$constant.before_color_2"
            :after="$constant.after_color_2" style="margin-top: 6px;">
          </proButton>
        </div>
      </div>
      <!-- 数据框 -->
      <div class="comment-content">
        <div class="comment-content-item" v-for="(textData, index) in textDatas" :key="index">
          <textarea class="comment-textarea" v-model="textData.val" :placeholder="textData.placeholder" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

const twoPoem = () => import("../common/twoPoem");
const myHeader = () => import("../common/myHeader");
const myTimer = () => import("../common/myTimer");
const proButton = () => import("../common/proButton");

export default {
  components: {
    twoPoem,
    myHeader,
    myTimer,
    proButton
  },
  data() {
    return {
      queryParam: {
        value: '',
        week: ''
      },
      textDatas: [
        { key: 'self', val: '', placeholder: '写下点什么...' },
        { key: '1', val: '', placeholder: '星期一任务，写下点什么...' },
        { key: '2', val: '', placeholder: '星期二任务，写下点什么...' },
        { key: '3', val: '', placeholder: '星期三任务，写下点什么...' },
        { key: '4', val: '', placeholder: '星期四任务，写下点什么...' },
        { key: '5', val: '', placeholder: '星期五任务，写下点什么...' },
        { key: '6', val: '', placeholder: '星期六任务，写下点什么...' },
        { key: '7', val: '', placeholder: '星期日任务，写下点什么...' },
        { key: 'taskDesc', val: '', placeholder: '本周工作描述，写下点什么...' },
        { key: 'taskTarget', val: '', placeholder: '本周工作目标，写下点什么...' },
        { key: 'taskContent', val: '', placeholder: '本周工作内容，写下点什么...' },
        { key: 'taskShow', val: '', placeholder: '本周工作说明，写下点什么...' },
        { key: 'planDesc', val: '', placeholder: '下周计划描述，写下点什么...' },
        { key: 'planTarget', val: '', placeholder: '下周计划目标，写下点什么...' },
        { key: 'planContent', val: '', placeholder: '下周计划内容，写下点什么...' },
        { key: 'planShow', val: '', placeholder: '下周计划说明，写下点什么...' }
      ],
      twoPoem: true
    }
  },
  created() {
    this.getDay();
  },
  methods: {
    // 初始化日期
    getDay() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      let nowDay = year + '-' + month + '-' + day;
      this.queryParam.week = this.getWeekInMonth(new Date(nowDay));
      this.queryParam.value = year + '-' + month + '-' + day;
    },
    weekChange(val) {
      if (val) {
        let arr = val.split('-');
        this.queryParam.week = this.getWeekInMonth(new Date(val));
      }
    },
    // 根据日期判断是月的第几周
    getWeekInMonth(t) {
      if (t == undefined || t == '' || t == null) {
        t = new Date();
      } else {
        var _t = new Date();
        _t.setYear(t.getFullYear());
        _t.setMonth(t.getMonth());
        _t.setDate(t.getDate());

        var date = _t.getDate(); //给定的日期是几号

        _t.setDate(1);
        var d = _t.getDay(); //1. 得到当前的1号是星期几。
        var fisrtWeekend = d;
        if (d == 0) {
          fisrtWeekend = 1;
          //1号就是星期天
        } else {
          fisrtWeekend = 7 - d + 1; //第一周的周未是几号
        }
        if (date <= fisrtWeekend) {
          return 1;
        } else {
          return 1 + Math.ceil((date - fisrtWeekend) / 7);
        }
      }
    },
    showCommentNum() {
      if (!this.showNum) {
        this.showNum = true;
      } else {
        this.showNum = false;
      }
    },
    fullScreen() {
      if (this.twoPoem) {
        this.twoPoem = false;
      } else {
        this.twoPoem = true;
      }
    }
  }
}
</script>

<style scoped>
.comment-wrap {
  background: var(--background);
  position: absolute;
  width: 100%;
}

.comment-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 105px;
  margin: 0 auto;
  padding: 5px 15px 5px 15px;
}

.myBetween-item {
  width: 50%;
  min-width: 385px;
  display: flex;
  flex-wrap: wrap;
}

.comment-content-item {
  display: flex;
  width: 50%;
  min-width: 385px;
  padding: 5px;
}

.comment-textarea {
  border: 1px solid var(--lightGray);
  width: 100%;
  font-size: 14px;
  min-height: 100%;
  padding: 20px;
  /* 不改变大小 */
  resize: none;
  /* 不改变边框 */
  outline: none;
  border-radius: 4px;
  background-image: var(--commentURL);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right 100%;
  margin-bottom: 10px;
}

.comment-btn {
  display: flex;
  height: 26px;
}
</style>